<template>
    <div>
        <div>
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
        </div>
        <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px">
            <div class="tab" style="display: flex;align-items: center">
                <div>推荐标题</div>
                <div class="tabSearch" style="display: flex;">
                    <el-input style="margin: 0 10px ;" v-model="titleData" placeholder="请输入推荐标题"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button>
                </div>
            </div>
            <div style="display: flex;align-items: center">
                <div>选择专家</div>
                <el-select style="margin: 0 10px ;" v-model="inputName" placeholder="选择专家" @change="handleChange">
                    <el-option v-for="item in expertDataList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="display: flex;align-items: center">
                <div>是否不中退</div>
                <el-select style="margin: 0 10px ;" v-model="ynData" placeholder="选择分类" @change="handleChangeYesOrNo">
                    <el-option v-for="item in yOrN" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>


        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            <el-table-column prop="issue" label="期号" align="center">

            </el-table-column>

            <!-- <el-table-column prop="pass_lx_text" label="过关类型" align="center">

            </el-table-column> -->
            <el-table-column prop="expert_info.nickname" label="专家" align="center">
            </el-table-column>
            <el-table-column prop="no_win_back" label="是否不中退" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.no_win_back == 1">
                        是
                    </span>
                    <span v-if="scope.row.no_win_back == 2">
                        否
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="is_free" label="是否付费" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_free == 1">
                        是
                    </span>
                    <span v-if="scope.row.is_free == 2">
                        否
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="show_lx_text" label="位置" align="center">

            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">

            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>




        <div>
            <el-dialog title="添加" :visible.sync="dialogTableVisible" :before-close="closeForm"
                :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="选择老师" prop="name">
                        <el-select v-model="ruleForm.expert_id" placeholder="请选择" @change="selectChangeExpert">
                            <el-option v-for="(item, index) in expertDataList" :key="index" :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="过关类型">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">14场</el-radio>
                            <el-radio :label="2">任九</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="显示类型">
                        <el-radio-group v-model="ruleForm.show_lx">
                            <el-radio :label="1">首页优选</el-radio>
                            <el-radio :label="2">近期连红</el-radio>
                            <el-radio :label="3">近期爆棚</el-radio>
                            <el-radio :label="4">今日热卖</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赛事选择">
                        <!-- <el-input v-model="ruleForm.title"></el-input> -->
                        <div>
                            <div style="display: flex;flex-wrap: wrap;">
                                <div v-for="(items, index) in fourteen" :key="index" class="fourteenClass"
                                    @click="toChange(items.match_id, items.match_time, items.lottery_id, items)">
                                    <div>
                                        <span>{{ items.home_all_name }} VS {{ items.away_all_name }}</span>
                                    </div>
                                    <div class="box">
                                        <div class="fourteenClass_a" v-for="(item, i) in items.recommend_result"
                                            :key="i" @click="onSelect1(item, items)" :class="{ 'item1': item.value }">
                                            <span>{{ item.desc }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="文章标题">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文章介绍">
                        <div v-if="isVisible1">
                            <WangEditor :content="contentData1" @submit="workVadeUpdate1" />
                        </div>
                    </el-form-item>
                    <el-form-item label="付费内容">
                        <div v-if="isVisible1">
                            <WangEditor :content="contentData2" @submit="workVadeUpdate2" />
                        </div>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="是否付费">
                        <el-radio-group v-model="ruleForm.is_free">
                            <el-radio :label="1">付费</el-radio>
                            <el-radio :label="2">不付费</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否不中退">
                        <el-radio-group v-model="ruleForm.no_win_back">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否执行红黑">
                        <el-radio-group v-model="ruleForm.exec_hh">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item label="是否显示">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
                        <el-input v-model="ruleForm.sort"></el-input>
                    </el-form-item>

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete(1)">取消</el-button>
                    <el-button type="primary" @click="clickConfirm(1)">确认</el-button>
                </div>
            </el-dialog>
        </div>


        <div>
            <el-dialog title="修改" :visible.sync="dialogTableModify" :before-close="modifyForm"
                :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="选择老师" prop="name">
                        <el-select v-model="ruleForm.expert_id" placeholder="请选择" @change="selectChangeExpert">
                            <el-option v-for="(item, index) in expertDataList" :key="index" :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="过关类型">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">14场</el-radio>
                            <el-radio :label="2">任九</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="串子分类">
                        <el-radio-group v-model="ruleForm.pass_lx">
                            <el-radio :label="1">14场</el-radio>
                            <el-radio :label="2">任九</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="显示类型">
                        <el-radio-group v-model="ruleForm.show_lx">
                            <el-radio :label="1">首页优选</el-radio>
                            <el-radio :label="2">近期连红</el-radio>
                            <el-radio :label="3">近期爆棚</el-radio>
                            <el-radio :label="4">今日热卖</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赛事选择">
                        <!-- <el-input v-model="ruleForm.title"></el-input> -->
                        <div>
                            <div style="display: flex;flex-wrap: wrap;">
                                <div v-for="(items, index) in alldata" :key="index" class="fourteenClass"
                                    @click="toChange(items.match_id, items.match_time, items.lottery_id, items)">
                                    <div>
                                        <span>{{ items.home_all_name }} VS {{ items.away_all_name }}</span>
                                    </div>
                                    <div class="box">
                                        <div class="fourteenClass_a" v-for="(item, i) in items.recommend_result"
                                            :key="i" @click="onSelect2(item, items)" :class="{ 'item1': item.value }">
                                            <span>{{ item.desc }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div v-for="(items, index) in fourteen" :key="index" class="fourteenClass"
                                    @click="toChange(items.match_id, items.match_time, items.lottery_id, items)">
                                    <div>
                                        <span>{{ items.home_all_name }} VS {{ items.away_all_name }}</span>
                                    </div>
                                    <div class="box">
                                        <div class="fourteenClass_a" v-for="(item, i) in items.recommend_result"
                                            :key="i" @click="onSelect1(item, items)" :class="{ 'item1': item.value }">
                                            <span>{{ item.desc }}</span>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item label="文章标题">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文章介绍">
                        <div v-if="isVisible">
                            <WangEditor :content="contentData3" @submit="workVadeUpdate3" />
                        </div>
                    </el-form-item>
                    <el-form-item label="付费内容">
                        <div v-if="isVisible">
                            <WangEditor :content="contentData4" @submit="workVadeUpdate4" />
                        </div>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="是否付费">
                        <el-radio-group v-model="ruleForm.is_free">
                            <el-radio :label="1">付费</el-radio>
                            <el-radio :label="2">不付费</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否不中退">
                        <el-radio-group v-model="ruleForm.no_win_back">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否执行红黑">
                        <el-radio-group v-model="ruleForm.exec_hh">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item label="是否显示">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
                        <el-input v-model="ruleForm.sort"></el-input>
                    </el-form-item>

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete(2)">取消</el-button>
                    <el-button type="primary" @click="clickConfirm(2)">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import WangEditor from '@/components/richText'
import { matcheList, expertList, getConfigList, oddsData, additionData, recommendationDatalist, recommendationDelete, fourteenList, addFourteen, fourteenSessions,fourteenDelete } from '../../../libs/api'
export default {
    components: {
        WangEditor
    },
    data() {
        return {
            expertDataList: [],
            dialogTableVisible: false,
            ruleForm: {
                issue: '',
                expert_id: '',
                show_lx: 1,
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: 1,
                no_win_back: 2,
                exec_hh: 2,
                status: 1,
                sort: '',
                type:'',
                matches: ''
            },
            isVisible1: true,
            contentData1: '',
            contentData2: '',
            fourteen: [],
            checkboxGroup4: [],
            oodMatchDatas: {},
            checkedAll: [],
            tableData: [],

            currentPage: 1,
            totalCount: 1,
            PageSize: 10,
            pageSizes: [5, 10],
            inputName: '',
            ynData: '',
            titleData: '',
            yOrN: [{
                id: 1,
                nickname: "是"
            }, {
                id: 2,
                nickname: "否"
            }],
            dialogTableModify: false,
            isVisible: false,
            alldata: []
        }
    },
    mounted() {
        this.getExpertList()
        this.getFourteenList()
        this.getfourteenSessions()
    },
    methods: {
        handleButton2Click(row) {
            console.log(row)
            this.$confirm('此操作将永久删除该推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log(row.id)
            fourteenDelete({
                id:row.id
            }).then(res=>{
                console.log(res)
                this.getfourteenSessions()
            })
        }).catch(() => {

        });
        },
        handleButton1Click(row) {
            console.log(row)
            this.isVisible = true;
            this.ruleForm.category = row.category
            this.ruleForm.expert_id = row.expert_id
            this.ruleForm.show_lx = row.show_lx
            this.ruleForm.issue = row.issue
            // this.ruleForm.pass_lx = row.pass_lx
            this.ruleForm.title = row.title
            this.ruleForm.free_content = row.free_content
            this.ruleForm.charge_content = row.charge_content
            this.ruleForm.price = row.price
            this.ruleForm.is_free = row.is_free
            this.ruleForm.no_win_back = row.no_win_back
            this.ruleForm.exec_hh = row.exec_hh
            this.ruleForm.status = row.status
            this.ruleForm.sort = row.sort
            this.ruleForm.matches = row.matches
            this.checkedAll = row.matches
            this.alldata = row.matches
            this.ruleForm.id = row.id
            this.ruleForm.type = row.type
            this.dialogTableModify = true
            this.contentData3 = row.free_content
            this.contentData4 = row.charge_content
            this.matchID = row.id
        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.getfourteenSessions()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.getfourteenSessions()
        },
        handleChange(value) {
            this.getfourteenSessions()
            console.log(value)
        },
        handleChangeType(value) {
            this.getfourteenSessions()
        },
        handleChangeYesOrNo(value) {
            this.getfourteenSessions()
        },
        searchExpert() {
            this.getRecommendationDatalist()
        },
        // 获取十四场推荐列表
        getfourteenSessions() {
            fourteenSessions({
                page: this.currentPage,
                limit: this.PageSize,
                expert_id: this.inputName,
                title: this.titleData,
                no_win_back: this.ynData
            }).then(res => {
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
        // 获取专家
        getExpertList() {
            expertList({
                page: 1,
                limit: 1000
            }).then(res => {
                this.expertDataList = res.data.list
            })
        },
        // 获取14场比赛列表
        getFourteenList() {
            fourteenList({

            }).then(res => {
                console.log(res)
                this.ruleForm.issue = res.data.issue
                this.fourteen = res.data.list
            })
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
            this.isVisible1=true
            this.getFourteenList()
        },
        closeForm() {
            this.dialogTableVisible = false
            this.fourteen = []


            Object.assign(this.ruleForm, {
                expert_id: '',
                show_lx: 1,
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: 1,
                no_win_back: 2,
                status: 1,
                sort: '',
                matches: ''
            });
            // this.checkboxGroup5 = []
            // this.gogos = []
            this.isVisible1 = false;
        },
        handleSelectChange() {

        },
        selectChangeExpert() {

        },
        clickDelete(e) {
            Object.assign(this.ruleForm, {
                expert_id: '',
                show_lx: 1,
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: 1,
                no_win_back: 2,
                status: 1,
                sort: '',
                matches: ''
            });
            if(e==1){
                this.dialogTableVisible = false
                    // this.checkedAll = []
                    // this.fourteen = []
                    this.isVisible1 = false
            }else{
                this.dialogTableModify = false
            this.isVisible = false;
            }
        },
        clickConfirm(e) {
            console.log(this.checkedAll.length)
            if(this.ruleForm.type==1&&this.checkedAll.length < 14){
                this.$message({
                    message:'请选满14场',
                    type:'warning'
                })
                return
            }
            if(this.ruleForm.type==2&&this.checkedAll.length < 9){
                this.$message({
                    message:'请选满9场',
                    type:'warning'
                })
                return
            }
            if(this.ruleForm.type==2&&this.checkedAll.length > 9){
                this.$message({
                    message:'只能选9场',
                    type:'warning'
                })
                return
            }
            if (e == 1) {
                addFourteen({
                    type:this.ruleForm.type,
                    issue: this.ruleForm.issue,
                    expert_id: this.ruleForm.expert_id,
                    show_lx: this.ruleForm.show_lx,
                    title: this.ruleForm.title,
                    free_content: this.ruleForm.free_content,
                    charge_content: this.ruleForm.charge_content,
                    price: this.ruleForm.price,
                    is_free: this.ruleForm.is_free,
                    no_win_back: this.ruleForm.no_win_back,
                    status: this.ruleForm.status,
                    sort: this.ruleForm.sort,
                    exec_hh: this.ruleForm.exec_hh,
                    matches: JSON.stringify(this.checkedAll),
                }).then(res => {
                    console.log(res)
                    this.getfourteenSessions()
                    this.dialogTableVisible = false
                    this.checkedAll = []
                    this.fourteen = []
                    console.log(this.checkedAll)
                    Object.assign(this.ruleForm, {
                        expert_id: '',
                        show_lx: 1,
                        title: '',
                        type:'',
                        free_content: '',
                        charge_content: '',
                        price: '',
                        is_free: 1,
                        no_win_back: 2,
                        status: 1,
                        sort: '',
                        matches: ''
                    });
                    this.isVisible1 = false
                })
            } else {
                for (var i = 0; i < this.checkedAll.length; i++) {
                if (this.checkedAll[i].recommend_result[0].value == false && this.checkedAll[i].recommend_result[1].value == false && this.checkedAll[i].recommend_result[2].value == false) {
                    this.$message({
                        message: '请选满14场',
                        type: 'warning'
                    });
                    return
                }

            }
                addFourteen({
                    issue: this.ruleForm.issue,
                    expert_id: this.ruleForm.expert_id,
                    show_lx: this.ruleForm.show_lx,
                    title: this.ruleForm.title,
                    free_content: this.ruleForm.free_content,
                    charge_content: this.ruleForm.charge_content,
                    price: this.ruleForm.price,
                    is_free: this.ruleForm.is_free,
                    no_win_back: this.ruleForm.no_win_back,
                    status: this.ruleForm.status,
                    sort: this.ruleForm.sort,
                    type:this.ruleForm.type,
                    exec_hh: this.ruleForm.exec_hh,
                    matches: JSON.stringify(this.checkedAll),
                    id: this.matchID
                }).then(res => {
                    console.log(res)
                    this.getfourteenSessions()
                    this.dialogTableModify = false
                    this.checkedAll = []
                    Object.assign(this.ruleForm, {
                        expert_id: '',
                        show_lx: 1,
                        title: '',
                        type:'',
                        free_content: '',
                        charge_content: '',
                        price: '',
                        is_free: 1,
                        no_win_back: 2,
                        status: 1,
                        sort: '',
                        matches: ''
                    });
                    this.isVisible = false
                })
            }
        },
        workVadeUpdate1(content) {
            console.log(content)
            this.ruleForm.free_content = content
        },
        workVadeUpdate2(content) {
            console.log(content)
            this.ruleForm.charge_content = content
        },
        workVadeUpdate3(content) {
            console.log(content)
            this.ruleForm.free_content = content
        },
        workVadeUpdate4(content) {
            console.log(content)
            this.ruleForm.charge_content = content
        },
        changeOdds4(e) {
            e.map(item => {
                item.value = true
            })
            this.checkboxGroup4 = e
            console.log(e)
        },
        changeOdds1(e) {
            e.value = !e.value
        },
        toChange() {

        },
        areAllItemsEqualTo(array, value) {
            return array.every(item => item === value);
        },
        modifyForm() {
            this.dialogTableModify = false
            Object.assign(this.ruleForm, {
                expert_id: '',
                show_lx: 1,
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: 1,
                no_win_back: 2,
                status: 1,
                sort: '',
                matches: ''
            });
            // this.checkboxGroup5 = []
            // this.gogos = []
            this.isVisible = false;
        },
        findIndexById(arr, id) {
            return arr.findIndex(function (obj) {
                return obj.id === id;
            });
        },

        onSelect1(e, i) {
            console.log(i)
            e.value = !e.value
            console.log(e)
            this.checkedAll.push(i)
            this.checkedAll = Array.from(new Set(this.checkedAll))

            for (var i = 0; i < this.checkedAll.length; i++) {
                if (this.checkedAll[i].recommend_result[0].value == false && this.checkedAll[i].recommend_result[1].value == false && this.checkedAll[i].recommend_result[2].value == false) {
                    console.log(999)
                    let index = this.findIndexById(this.checkedAll, this.checkedAll[i].id)
                    console.log(index)
                    this.checkedAll.splice(index, 1)
                    console.log(this.checkedAll)
                }

            }
            console.log(this.checkedAll)
        },
        onSelect2(e, i) {
            e.value = !e.value
            this.ruleForm.matches.push(i)
            console.log(i)
            this.ruleForm.matches = Array.from(new Set(this.ruleForm.matches))
            console.log(this.ruleForm.matches)
            for (var i = 0; i < this.ruleForm.matches.length; i++) {
                // console.log(this.ruleForm.matches[i])
                // if (this.ruleForm.matches[i].recommend_result[0].value == false && this.ruleForm.matches[i].recommend_result[1].value == false && this.ruleForm.matches[i].recommend_result[2].value == false) {
                //     console.log(999)
                //     let index = this.findIndexById(this.ruleForm.matches, this.ruleForm.matches[i].id)
                //     console.log(index)
                //     this.ruleForm.matches.splice(index, 1)
                //     console.log(this.ruleForm.matches)
                // }

            }
            console.log(this.ruleForm.matches)
            this.alldata = this.ruleForm.matches
            this.checkedAll = this.ruleForm.matches
        }
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.item1 {
    background-color: #3C9CFF;
    color: #fff;
}

.box {
    display: flex;

}

.fourteenClass {
    width: 300px;
}

.fourteenClass_a {
    width: 80px;
    border: 1px solid #aaa;
    text-align: center;
    line-height: 38px;
}

.fourteenClass_a:nth-child(2) {
    border-left: none;
    border-right: none;
}
</style>